<template>
  <div class="button">
    <a-button type="primary" @click="showModal">
      更改教育经历
    </a-button>
    <a-modal
        title="更改教育经历"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="序号"
        >
          <a-input
              v-decorator="[
          '状态',
          { rules: [{ required: checkNick, message: '请输入要更改教育经历的序号：' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="学历类型"
        >
          <a-input
              v-decorator="[
          '状态',
          { rules: [{ required: checkNick, message: '请输入要更改教育经历的序号：' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="开始日期"
        >
          <a-date-picker style="width: 200px" />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="结束日期"
        >
          <a-date-picker style="width: 200px" />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="学校名称"
        >
          <a-input
              v-decorator="[
          '使用时间(月)',
          { rules: [{ required: checkNick, message: '请输入要更改教育经历的序号：' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="专业名称"
        >
          <a-input
              v-decorator="[
          '熟练程度',
          { rules: [{ required: checkNick, message: '请输入技能的熟练程度' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="干部名称"
        >
          <a-input
              v-decorator="[
          '备注',
          { rules: [{ required: checkNick, message: '请输入备注' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="获奖证书"
        >
          <a-input
              v-decorator="[
          '备注',
          { rules: [{ required: checkNick, message: '请输入备注' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="证明人"
        >
          <a-input
              v-decorator="[
          '备注',
          { rules: [{ required: checkNick, message: '请输入备注' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="联系电话"
        >
          <a-input
              v-decorator="[
          '备注',
          { rules: [{ required: checkNick, message: '请输入备注' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="备注"
        >
          <a-input
              v-decorator="[
          '备注',
          { rules: [{ required: checkNick, message: '请输入备注' }] },
        ]"
              placeholder="请输入要更改教育经历的序号："
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
  check() {
    this.form.validateFields(err => {
      if (!err) {
        console.info('success');
      }
    });
  },
  handleChange(e) {
    this.checkNick = e.target.checked;
    this.$nextTick(() => {
      this.form.validateFields(['nickname'], { force: true });
    });
  },
}
</script>
<style>
.button {
  position: relative;
  left: 50px;
  float: left;
}
</style>